<template>
    <el-dialog :title="title" :visible.sync="open" width="70%" :before-close="handleClose" class="dialogClass">
        <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
            <el-row :gutter="20">
                <el-col :xl="8" :lg="8">
                    <el-form-item label="项目" prop="xiangmu" label-width="100px">
                        <el-input size="big" v-model="ruleForm.xiangmu" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="一月" prop="gouxiangshangbianhao" label-width="100px">
                        <el-input size="big" v-model="ruleForm.gouxiangshangbianhao" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="二月" prop="eryue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.eryue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="三月" prop="sanyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.sanyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="四月" prop="siyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.siyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="五月" prop="wuyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.wuyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="六月" prop="liuyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.liuyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="七月" prop="qiyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.qiyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="八月" prop="bayue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.bayue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="九月" prop="jiuyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.jiuyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="十月" prop="shiyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.shiyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="十一月" prop="shiyiyue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.shiyiyue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="十二月" prop="shieryue" label-width="100px">
                        <el-input size="big" v-model="ruleForm.shieryue" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="总计" prop="heji" label-width="100px">
                        <el-input size="big" v-model="ruleForm.heji" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="一季度" prop="yijidu" label-width="100px">
                        <el-input size="big" v-model="ruleForm.yijidu" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="二季度" prop="erjidu" label-width="100px">
                        <el-input size="big" v-model="ruleForm.erjidu" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="三季度" prop="sanjidu" label-width="100px">
                        <el-input size="big" v-model="ruleForm.sanjidu" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xl="8" :lg="8">
                    <el-form-item label="四季度" prop="sijidu" label-width="100px">
                        <el-input size="big" v-model="ruleForm.sijidu" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="big" @click="onSubmit('ruleForm')" :loading="loading">{{ submitButton
            }}</el-button>
            <el-button size="big" @click="resetForm('ruleForm')">重置</el-button>
            <el-button size="big" @click="close('ruleForm')">取消</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
import { saveAPI, updateAPI } from "@/apis/material/datastatistics.js";

export default {
    data() {
        return {
            // 提交按钮
            submitButton: "",
            // 控制弹窗
            open: false,
            // 控制按钮加载状态
            loading: false,
            // 弹窗标题
            title: "",
            // 表单项
            ruleForm: {
                xiangmu: "",
                gouxiangshangbianhao: "",
                dianhua: "",
                eryue: "",
                sanyue: "",
                siyue: "",
                wuyue: "",
                liuyue: "",
                qiyue: "",
                bayue: "",
                jiuyue: "",
                shiyue: "",
                shiyiyue: "",
                shieryue: "",
                heji: "",
                yijidu: "",
                erjidu: "",
                sanjidu: "",
                sijidu: "",
            },
        };
    },
    methods: {
        // 控制弹窗
        show(title, row) {
            const _this = this;
            _this.title = title;
            _this.open = true;
            if (row) {
                _this.submitButton = "修改";
                _this.ruleForm = JSON.parse(JSON.stringify(row));
            } else {
                _this.submitButton = "确定登记";
            }
        },
        close(formName) {
            this.open = false;
            this.resetForm(formName);
        },
        handleClose(done) {
            const _this = this;
            _this
                .$confirm("系统可能不会保存您的更改", "确认关闭？")
                .then((_) => {
                    done();
                    _this.resetForm("ruleForm");
                })
                .catch((_) => { });
        },
        onSubmit(formName) {
            const _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (_this.title == "新增数据统计") {
                        // console.log(_this.ruleForm);
                        saveAPI(_this.ruleForm).then(function (res) {
                            // console.log("res: ", res.code);
                            if (res.code === 0) {
                                _this.$alert(
                                    _this.ruleForm.xiangmu + res.msg,
                                    "提示",
                                    {
                                        confirmButtonText: "确定",
                                        callback: (action) => {
                                            _this.close("ruleForm");
                                            _this.$parent.$parent.search();
                                        },
                                    }
                                );
                            }
                        });
                    } else {
                        updateAPI(_this.ruleForm).then(function (res) {
                            // console.log("res: ", res.code);
                            if (res.code === 0) {
                                _this.$alert(
                                    _this.ruleForm.xiangmu + res.msg,
                                    "提示",
                                    {
                                        confirmButtonText: "确定",
                                        callback: (action) => {
                                            _this.close("ruleForm");
                                            _this.$parent.$parent.search();
                                        },
                                    }
                                );
                            }
                        });
                    }
                }
            });
        },
        // 表单重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>
  
<style scoped></style>